<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        p{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <p>

        </p>
    </div>
    <script>
        /* 
            鼠标事件 是依赖于鼠标行为而触发的事件 
        
        1.左键单击  
          click  鼠标左键点一下  触发事件处理函数 

        2.左键双击 
          dblclick

        3.右键单击 
          contextmenu
        4.按键按下 
           mousedown
        5.按键抬起来
           mouseup
        6. 鼠标移动 
            mousemove
            每秒 触发 60次 
        7. 鼠标已入
            mouseover

        8. 鼠标移出  
            mouseout

        9.鼠标移入 
            mouseenter
        10.鼠标移出
            mouseleave
        
        */
    
        var divele = document.querySelector('div');

        // divele.onclick = function(){
        //     alert('单击')
        // }

        // divele.ondblclick = function(){
        //     alert('双击')
        // }

        
        // divele.oncontextmenu = function(){
        //     alert('右键单击 出来菜单');
        //     // 先弹框  紧接着出来菜单
        // }


        // divele.onmousedown = function(){
        //     alert('按下')
        // }


        // divele.onmouseup = function(){
        //     alert('抬起')
        // }


        // divele.onmousemove = function(){
        //     console.log('不允许在我的世界里走来走去');
        // }


        // divele.onmouseover = function(){
        //     console.log('移入');
        // }

        // divele.onmouseout = function(){
        //     console.log('移出');
        // }



        divele.onmouseenter = function(){
            console.log('移入');
        }

        divele.onmouseleave = function(){
            console.log('移出');
        }





        






    </script>
</body>
</html>